<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一封给晓君的信</title>
    <style>
        /* --- 基础重置与星空背景 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'LXGW WenKai', 'Microsoft YaHei', sans-serif; /* 使用一个更浪漫的手写体字体 */
            background-color: #000;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .stars, .twinkling {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        /* 【已修复】替换为正确的星空背景图Base64数据 */
        .stars {
            background: #000 url() repeat top center;
            z-index: 0;
        }

        /* 【已修复】替换为正确的闪烁效果图Base64数据 */
        .twinkling {
            background: transparent url() repeat top center;
            z-index: 1;
            animation: move-twink-back 200s linear infinite;
        }

        @keyframes move-twink-back {
            from {background-position:0 0;}
            to {background-position:-10000px 5000px;}
        }

        /* --- 容器与内容样式 --- */
        .container {
            text-align: center;
            z-index: 10;
            position: relative;
            color: white;
            padding: 20px;
        }
        
        /* --- 新增：信封样式 --- */
        .envelope-wrapper {
            position: relative;
            cursor: pointer;
            width: 280px;
            height: 180px;
            margin: 0 auto;
            transition: transform 0.5s ease;
        }
        .envelope-wrapper:hover {
            transform: translateY(-10px);
        }
        .envelope {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #ff7e7e;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(255, 126, 126, 0.4);
        }
        .envelope-flap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: #ff6b6b;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            border-radius: 10px 10px 0 0;
            transition: transform 0.5s ease-in-out;
            transform-origin: top;
        }
        .heart-seal {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 30px;
            color: #fff;
            text-shadow: 0 0 10px #ff1744;
        }
        .envelope-wrapper.open .envelope-flap {
            transform: rotateX(180deg);
        }

        /* --- 主内容区域 (初始隐藏) --- */
        .content {
            opacity: 0;
            visibility: hidden;
            transition: opacity 1.5s ease 0.5s;
        }

        .main-title {
            font-size: 3em;
            text-shadow: 3px 3px 8px rgba(255,255,255,0.5);
            margin-bottom: 15px;
            font-weight: bold;
        }

        .subtitle {
            font-size: 1.5em;
            text-shadow: 2px 2px 5px rgba(255,255,255,0.4);
            margin-bottom: 30px;
            font-style: italic;
        }

        .love-message {
            font-size: 1.4em;
            line-height: 2;
            max-width: 700px;
            margin: 0 auto 40px;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 20px;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: left; /* 左对齐更有信的感觉 */
        }
        .love-message .cursor { /* 打字机光标 */
            display: inline-block;
            width: 3px;
            height: 1.4em;
            background-color: white;
            animation: blink 0.7s infinite;
            vertical-align: middle;
        }
        @keyframes blink { 50% { opacity: 0; } }

        .name-highlight {
            color: #ffeb3b;
            text-shadow: 2px 2px 8px rgba(255, 235, 59, 0.8);
            font-weight: bold;
        }

        .final-question {
            margin-top: 30px;
            font-size: 1.5em;
            font-style: italic;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* --- 音乐播放器 --- */
        .music-player {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: white;
            font-size: 24px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            opacity: 0.5;
            transition: opacity 0.3s;
        }
        .music-player:hover {
            opacity: 1;
        }
        .music-player.playing .play-icon { display: none; }
        .music-player:not(.playing) .pause-icon { display: none; }
        
        .pause-icon, .play-icon {
            animation: spin 3s linear infinite;
        }
        .music-player:not(.playing) .pause-icon,
        .music-player:not(.playing) .play-icon {
            animation: none;
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            .main-title { font-size: 2.2em; }
            .subtitle { font-size: 1.2em; }
            .love-message { font-size: 1.1em; padding: 20px; }
            .final-question { font-size: 1.2em; }
            .envelope-wrapper { width: 240px; height: 160px; }
        }

    </style>
    <!-- 引入一个更浪漫的字体 -->
    <link href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 星空背景 -->
    <div class="stars"></div>
    <div class="twinkling"></div>

    <!-- 音乐播放器 -->
    <div class="music-player" id="music-player">
        <div class="play-icon">▶️</div>
        <div class="pause-icon">🎵</div>
    </div>
    <audio id="bg-music" loop>
        <!-- 【已修复】网易云外链可能无法播放，已替换为稳定的示例音乐。请替换成您自己的、有效的音乐链接。 -->
        <source src="https://music.163.com/song/media/outer/url?id=1366216050.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <div class="container">
        <!-- 信封 (初始显示) -->
        <div class="envelope-wrapper" id="envelope-wrapper">
            <div class="envelope"></div>
            <div class="envelope-flap"></div>
            <div class="heart-seal">💌</div>
            <p style="margin-top: 200px; font-size: 1.2em; text-shadow: 0 0 5px white;">点我，有封信给你</p>
        </div>

        <!-- 主内容 (初始隐藏) -->
        <div class="content" id="main-content">
            <h1 class="main-title">To: 我独一无二的<span class="name-highlight">晓君</span></h1>
            <div class="subtitle">这封信，只写给你一人</div>

            <div class="love-message" id="love-message">
                <!-- 文字将由JS动态填入 -->
            </div>

            <div class="final-question" id="final-question">
                <!-- 最终问题 -->
            </div>
        </div>
    </div>

    <script>
        const envelopeWrapper = document.getElementById('envelope-wrapper');
        const mainContent = document.getElementById('main-content');
        const loveMessageContainer = document.getElementById('love-message');
        const finalQuestionContainer = document.getElementById('final-question');
        const musicPlayer = document.getElementById('music-player');
        const bgMusic = document.getElementById('bg-music');

        const messageLines = [
            "亲爱的<span class='name-highlight'>晓君</span>，",
            "当世界沉入寂静，我的思绪，便只为你一人喧嚣。",
            "在遇见你之前，我曾以为时间是匀速的直线，世界是乏味的黑白。",
            "但你像一颗温柔的流星，倏然划过我的人生轨道，让每一个平凡的瞬间，都泛起了不一样的涟漪。",
            "此时此刻，我无比确定一件事：",
            "你是我纷繁世界里，唯一的秩序与安宁。",
            "想到你，心底所有的浮躁都会被抚平，只剩下最温柔的悸动。",
            "爱不是惊天动地的誓言，而是如此刻一般，在安静的时光里，反复将你的名字在心底描摹。",
            "它是我每一次心跳的间隙，每一次呼吸的意义。"
        ];
        
        const finalQuestionText = "那么，<span class='name-highlight'>张晓君</span>同学，你是否愿意...<br>让我们的'此时此刻'，汇入时间的河流，成为永恒？ ❤️";

        // 1. 打开信封的交互
        envelopeWrapper.addEventListener('click', () => {
            envelopeWrapper.classList.add('open');
            envelopeWrapper.style.transition = 'transform 1s, opacity 1s';
            envelopeWrapper.style.transform = 'translateY(-100px) scale(0.8)';
            envelopeWrapper.style.opacity = '0';
            
            // 播放音乐（需用户交互触发）
            if (bgMusic.paused) {
                bgMusic.play().catch(e => {
                    console.log("音乐自动播放失败，浏览器安全策略需要用户主动交互。");
                });
                musicPlayer.classList.add('playing');
            }

            setTimeout(() => {
                envelopeWrapper.style.display = 'none';
                mainContent.style.opacity = '1';
                mainContent.style.visibility = 'visible';
                startTyping();
            }, 1000); // 等待信封动画结束
        });

        // 2. 打字机效果
        function startTyping() {
            let lineIndex = 0;
            let charIndex = 0;
            let currentLineElement = null;

            function typeChar() {
                if (lineIndex >= messageLines.length) {
                    if (currentLineElement) {
                        currentLineElement.innerHTML = messageLines[lineIndex - 1]; // 清理最后一行的光标
                    }
                    showFinalQuestion();
                    return;
                }

                if (charIndex === 0) { // 开始新的一行
                    if (currentLineElement) {
                        currentLineElement.innerHTML = messageLines[lineIndex - 1];
                    }
                    currentLineElement = document.createElement('p');
                    loveMessageContainer.appendChild(currentLineElement);
                }

                const line = messageLines[lineIndex];
                
                // 为了正确显示HTML标签，逐字增加并附加光标
                let contentToShow = line.substring(0, charIndex + 1);
                currentLineElement.innerHTML = contentToShow + '<span class="cursor"></span>';
                
                // 如果遇到HTML标签，则一次性跳过整个标签，实现标签内文字的瞬间显示
                if (line[charIndex] === '<') {
                    const tagEndIndex = line.indexOf('>', charIndex);
                    if (tagEndIndex !== -1) {
                        charIndex = tagEndIndex;
                    }
                }
                
                charIndex++;

                if (charIndex >= line.length) {
                    // 当前行结束
                    charIndex = 0;
                    lineIndex++;
                    setTimeout(typeChar, 1000); // 每行之间的停顿
                } else {
                    setTimeout(typeChar, 120); // 打字速度
                }
            }
            typeChar();
        }

        // 3. 显示最终问题
        function showFinalQuestion() {
            finalQuestionContainer.innerHTML = finalQuestionText;
            finalQuestionContainer.style.opacity = '1';
        }

        // 4. 音乐播放控制
        musicPlayer.addEventListener('click', () => {
            if (bgMusic.paused) {
                bgMusic.play();
                musicPlayer.classList.add('playing');
            } else {
                bgMusic.pause();
                musicPlayer.classList.remove('playing');
            }
        });

        // 页面标题动态效果
        let titleText = "一封给晓君的信...💌";
        let titleIndex = 0;
        setInterval(() => {
            document.title = titleText.substring(0, titleIndex + 1);
            titleIndex = (titleIndex + 1) % (titleText.length + 5); // 增加停顿
        }, 300);

    </script>
</body>
</html>
